<script setup>
import { ref } from 'vue'
import * as funRole from "@/apis/system/role"
import { createOrUpdate } from "@/utils/config"

const emits = defineEmits(["refreshData"])
const showDialog = ref(false)
const dialogType = ref("")
const dialogData = ref({})
const formRefRoleEdit = ref(null)
const formRules = {
    isDefault: [{ required: true, message: '请选择是否默认角色', trigger: 'blur' }]
}

const open = (row) => {
    if (row && row.id) {
        // 编辑
        dialogType.value = createOrUpdate[1]
        $Common.fullLoading()
        funRole.getDetail({id: row.id}).then(res => {
            $Common.closeFullLoading()
            dialogData.value = { ...res }
            showDialog.value = true
        })
    } else {
        // 新增
        dialogType.value = createOrUpdate[0]
        dialogData.value = {
            id: 0,
            name: "",
            isPublic: true,
            isDefault: false,
            desc: ""
        }
        showDialog.value = true
    }
}

const _save = () => {
    formRefRoleEdit.value.validate((valid) => {
        if (!valid) return false
        $Common.fullLoading()
        let commitTemp = {
            id: dialogData.value.id,
            name: dialogData.value.name,
            isPublic: dialogData.value.isPublic,
            isDefault: dialogData.value.isDefault
        }
        if (dialogType.value === createOrUpdate[0]) {
            // 新增
            funRole.create(commitTemp).then(res => {
                commonSuccess(null, res)
            })
        } else {
            // 编辑
            funRole.update(commitTemp).then(res => {
                commonSuccess(null, res)
            })
        }
    })
}

const _close = () => {
    showDialog.value = false
    formRefRoleEdit.value.resetFields()
}

const commonSuccess = (val, data) => {
    let tips = val || "操作成功!"
    // 广播到user页面刷新数据
    $Common.setBroadcast("bdChangeRole", { name: ["pageSystemUser"] })
    $Common.alert(tips).then(() => {
        $Common.closeFullLoading()
        _close()
        emits("refreshData", data)
    })
}

// 暴露给父组件
defineExpose({
    open
})
</script>

<template>
    <el-dialog title="角色编辑" class="c-el-dialog comp-role-edit-dialog" v-model="showDialog"
        :draggable="true" :before-close="_close" :close-on-click-modal="false" :append-to-body="true">
        <el-form :model="dialogData" ref="formRefRoleEdit" :rules="formRules" label-width="100px" size="large">
            <el-form-item label="角色名称" prop="name">
                <el-input placeholder="请输入角色名称" v-model="dialogData.name"></el-input>
            </el-form-item>
            <el-form-item label="默认角色" prop="isDefault">
                <el-radio-group v-model="dialogData.isDefault">
                    <el-radio :value="false" border style="margin-right: 5px;">否</el-radio>
                    <el-radio :value="true" border>是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="角色描述" prop="desc">
                <el-input placeholder="请输入角色名称" v-model="dialogData.desc"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="_close()">关闭</el-button>
            <el-button type="primary" plain @click="_save()">确定</el-button>
        </template>
    </el-dialog>
</template>

<style lang="scss">
.comp-role-edit-dialog {
    max-width: 520px !important;
}
</style>